<script setup lang="ts">
import { ref } from "vue";
import Child from "./14_父子通信中中的子组件.vue";
const username = ref("张三");
const age = ref(18);
const ChangeInfo = () => {
  username.value = "李四";
  age.value++;
};

// 父组件定义函数
const receiveFunc = (count: number) => {
  age.value = count;
};
const receiveNameFunc = (name: string) => {
  username.value = name;
};
const receiveAll = (count: number, name: string) => {
  username.value = name;
  age.value = count;
};
</script>

<template>
  <div class="parent">
    <h1>父组件</h1>
    <p>姓名:{{ username }}</p>
    <p>年龄:{{ age }}</p>
    <button @click="ChangeInfo">修改内容</button>
    <Child
      :username="username"
      :age="age"
      :func="receiveFunc"
      @update-age="receiveFunc"
      @update-name="receiveNameFunc"
      @update-all="receiveAll"
    >
    </Child>
  </div>
</template>

<style scoped></style>
